<!--
 * @Author: yuanweijiang
 * @Date: 2024-03-13 10:58:47
 * @LastEditors: yuanweijiang
-->

<template>
	<el-dialog title="样式预览" v-model="visible" :close-on-click-modal="false" draggable>
		<pre ref="xmlContent"></pre>
	</el-dialog>
</template>

<script setup lang="ts" name="layerLook">
// 引入 ref 和 onMounted
import { ref, onMounted } from 'vue';

// 定义变量内容
const visible = ref(false);
const xmlContent = ref<HTMLPreElement | null>(null);

// 当组件挂载后执行
onMounted(() => {
	// 检查是否成功获取到 ref
	if (xmlContent.value) {
		xmlContent.value.textContent = '初始文本内容'; // 设置初始文本内容
	}
});

// 打开弹窗
const openDialog = (xmlContentStr: string) => {
	visible.value = true;
	setTimeout(() => {
		xmlContent.value.textContent = formatXml(xmlContentStr); // 设置初始文本内容
	}, 1000);
};
const formatXml = (xml: string) => {
	const PADDING = ' '.repeat(2); // 缩进两个空格
	const reg = /(>)(<)(\/*)/g;
	let pad = 0;

	return xml.replace(reg, function (match, p1, p2, p3) {
		if (p1 === '<' && p3 !== '/') {
			pad += 1;
		} else if (p1 === '<' && p3 === '/') {
			pad -= 1;
		}

		return '\n' + PADDING.repeat(pad) + p1 + p2 + p3;
	});
};

// 暴露变量 只有暴漏出来的变量 父组件才能使用
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
pre {
	white-space: pre-wrap; /* 保留换行符和空格 */
	padding: 10px;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-family: monospace; /* 使用等宽字体 */
}
</style>
